<template>
	<div class="red-package-exchange">
		<cl-popup direction="bottom" :force-update="false" :visible.sync="visible" @close="_close">
			<div class="red-package-exchange__header">
				兑换现金红包
			</div>

			<div class="red-package-exchange__gold">
				<img src="@/assets/2/images/red-package/gold.png" alt="" />
				<span>{{ bwbt_userInfo.gold || 0 }}</span>
			</div>

			<div class="red-package-exchange__container">
				<div
					class="red-package-exchange__item"
					:class="[
						{
							'is-active': bwbt_userInfo.gold > item.gold,
							'is-new': item.isNewPerson == 1
						}
					]"
					:id="`${item.isNewPerson == 1 ? 'step-2' : ''}`"
					v-for="(item, index) in list"
					:key="index"
				>
					<img class="red-package-exchange__icon" src="@/assets/2/images/red-package/exchange.png" />

					<span class="red-package-exchange__price">￥{{ item.amount }}</span>

					<div class="red-package-exchange__btn" @click="toExchange(item)">{{ item.gold }}积分兑换</div>
				</div>
			</div>
		</cl-popup>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import _ from 'lodash';
import ClPopup from '@/components/popup';
import { Toast } from 'vant';

export default {
	components: {
		ClPopup
	},

	data() {
		return {
			visible: false,
			list: []
		};
	},

	computed: {
		...mapGetters(['bwbt_userInfo'])
	},

	methods: {
		open() {
			this.visible = true;

			this.$service.bwbt.bwbtGoldExchangeSetting.list().then(res => {
				this.list = res;

				setTimeout(() => {
					this.$root.$children[0].$refs['guide'].open(2, () => {
						this.toExchange(res[0]);
					});
				}, 500);
			});
		},

		_close() {
			this.$store.commit('CLEAR_GUIDE');
		},

		close() {
			this.visible = false;
		},

		toExchange: _.debounce(function({ id, isNewPerson, amount }) {
			this.$service.bwbt.bwbtGold
				.exchange({ id })
				.then(() => {
					Toast(`恭喜您兑换获得${amount}元现金红包`);

					if (isNewPerson == 1) {
						this.$root.$children[0].$refs['guide'].open(3, () => {
							this.$router.push('/member-center');
						});
					}

					// 完成任务
					this.$store.dispatch('finishTask', { sceneKey: 'gift' });

					this.close();
				})
				.catch(err => {
					Toast(err.message);
				});
		}, 300)
	}
};
</script>

<style lang="scss" scoped>
.red-package-exchange {
	/deep/.cl-popup {
		border-radius: 20px 20px 0 0;
	}

	&__header {
		font-size: 30px;
		font-weight: bold;
		text-align: center;
		height: 60px;
		position: relative;
		z-index: 99999 !important;
	}

	&__gold {
		display: flex;
		align-items: center;
		background-color: #efefef;
		border-radius: 40px;
		height: 54px;
		padding: 0 20px;
		position: absolute;
		left: 40px;
		top: 80px;

		img {
			height: 48px;
			width: 48px;
			margin-right: 6px;
		}

		span {
			font-size: 28px;
			font-weight: 500;
			color: #ff462c;
		}
	}

	&__container {
		height: 780px;
		width: 100%;
		margin: 80px 0 60px 0;
	}

	&__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 24px;
		height: 260px;
		width: 50%;
		box-sizing: border-box;
		position: relative;
		border-right: 1px solid #eee;
		border-bottom: 1px solid #eee;
		float: left;

		&:nth-child(even) {
			border-right: 0;
		}

		&.is-active {
			.red-package-exchange__btn {
				border: 2px solid #e12108;
				color: #e12108;
			}
		}

		&.is-new {
			&::after {
				content: '新人专享';
				background-color: #ff462c;
				color: #fff;
				border-radius: 20px 20px 20px 0;
				padding: 2px 14px;
				display: block;
				position: absolute;
				right: 20px;
				top: 10px;
			}
		}
	}

	&__icon {
		height: 140px;
		width: 130px;
	}

	&__price {
		color: #e12108;
		font-weight: bold;
		position: absolute;
		top: 44px;
		font-size: 30px;
	}

	&__btn {
		height: 60px;
		line-height: 60px;
		padding: 0 20px;
		border-radius: 60px;
		border: 2px solid #999;
		color: #999;
		margin-top: 20px;
		font-weight: bold;
	}
}
</style>
